<template>
	<view class="" style="padding-bottom: 108rpx;">
		<view class="head">
			<view class="head-img" @click="addImg">
				<image class="head-picture" :src="form.picture?form.picture:require('@/static/icon/pet.png')"
					mode="aspectFill"></image>
				<image class="head-icon"
					src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412261355468300.png" mode="">
				</image>
			</view>
		</view>

		<view class="item">
			<picker range-key="name" class="item-pick" @change="handlePicker($event,'typeIndex')" :value="typeIndex"
				:range="typeList">
				<view :style="typeIndex==-1?'color:#BBBBBB;':''">
					{{typeIndex>=0?typeList[typeIndex].name || '--':'请选择宠物类型'}}</view>
			</picker>
			<image src="@/pagesPet/static/icon/check.png" mode=""></image>
		</view>
		<view class="item">
			<picker @click="pickerKind" :disabled="kindIndex ==-1 && !kindList.length" range-key="name"
				class="item-pick" @change="handlePicker($event,'kindIndex')" :value="kindIndex" :range="kindList">
				<view :style="kindIndex==-1?'color:#BBBBBB;':''">
					{{kindIndex>=0?kindList[kindIndex].name || '--':'请选择宠物品种'}}</view>
			</picker>
			<image src="@/pagesPet/static/icon/check.png" mode=""></image>
		</view>
		<view class="item">
			<picker range-key="value" class="item-pick" @change="handlePicker($event,'genderIndex')"
				:value="genderIndex" :range="genderList">
				<view :style="genderIndex==-1?'color:#BBBBBB;':''">
					{{genderIndex>=0?genderList[genderIndex].value || '--':'请选择宠物性别'}}
				</view>
			</picker>
			<image src="@/pagesPet/static/icon/check.png" mode=""></image>
		</view>
		<view class="item">
			<input v-model="form.name" type="text" placeholder="填写宠物名称" placeholder-class="petInputStyle" />
		</view>
		<view class="item">
			<picker class="item-pick" mode="date" :value="form.birthday" @change="handleDate" :end='getCurrentDate()'>
				<view :style="!form.birthday?'color:#BBBBBB;':''">{{form.birthday || '请选择出生日期'}}</view>
			</picker>
			<image src="@/pagesPet/static/icon/check.png" mode=""></image>
		</view>
		<view class="item">
			<input v-model="form.remark" type="text" placeholder="填写备注" placeholder-class="petInputStyle" />
		</view>
		<view class="btn" @click="addCargo">
			{{id?'确认修改':'确认添加'}}
		</view>
	</view>
</template>

<script>
	import {
		getEnumList,
		addCargo,
		getCargoDetail,
		editCargo,
		getValues,
		getTypeTree,
		getTypeList
	} from "@/api/pet/index/saler"
	import {
		imgUpload
	} from '@/api/common'
	import util from "@/common/util.js"
	export default {
		data() {
			return {
				user: {},
				date: null,
				typeIndex: -1,
				typeList: [],

				genderIndex: 0,
				genderList: [],
				form: {
					mchId: undefined, //企业ID
					platId: undefined, //平台ID
					userId: undefined, //用户ID
					teamId: undefined, //团队ID
					picture: undefined, //主图
					name: undefined, //宠物名称
					birthday: undefined, //宠物出生日期
					type: undefined, //宠物类型
					sex: undefined, //宠物性别
					bindPhone: undefined, //用户手机
					bindUserId: undefined, //绑定用户ID
					bindNickname: undefined, //宠物主昵称
					bindStatus: undefined, //绑定状态
					bindTime: undefined, //绑定时间
					remark: undefined
				},
				id: '',
				kindList: [],
				kindIndex: -1,
			}
		},
		onLoad(e) {
			this.id = e.id
			if(this.id){
				uni.setNavigationBarTitle({
					title:"编辑宠物"
				})
			}else{
				uni.setNavigationBarTitle({
					title:"添加宠物"
				})
			}
			this.user = uni.getStorageSync('user')
			let teamInfo = uni.getStorageSync('pet_team')
			this.form.teamId = teamInfo.teamId
			this.init()
		},

		methods: {
			pickerKind() {
				if (this.kindIndex == -1 && !this.kindList.length) {
					uni.showToast({
						title: "请先选择宠物类型",
						icon: "none"
					})
					return
				}
			},
			async init() {
				await this.getEnumList()
				this.typeList = await this.getTypeList()
				if (this.id) {
					this.getCargoDetail()
				}
			},
			async getTypeList(code) {
				let res = await getTypeList({
					parentCode: code || undefined
				})
				return res
			},
			getCargoDetail() {
				getCargoDetail({
					id: this.id,
					teamId: this.form.teamId
				}).then(async res => {
					this.form = res || {}
					this.form.birthday = this.form.birthday.split(' ')[0]
					this.typeIndex = this.typeList.findIndex(item => {
						return item.code == this.form.type1
					})
					this.genderIndex = this.genderList.findIndex(item => {
						return item.key == this.form.sex
					})
					this.kindList = await this.getTypeList(this.typeList[this.typeIndex].code)
					this.kindIndex = this.kindList.findIndex(item => {
						return item.code == this.form.type2
					})
				})
			},
			getCurrentDate() {
				return util.getdate()
			},
			addImg() {
				var _this = this
				uni.chooseImage({
					count: 1,
					success: res => {
						let tempFilePaths = res.tempFilePaths[0];
						_this.upload(tempFilePaths)
					}
				})

			},
			upload(file) {
				imgUpload(file).then(res => {
					let data = JSON.parse(res.data);
					this.form.picture = data.url
				})

			},
			addCargo() {
				let form = JSON.parse(JSON.stringify(this.form))
				console.log(form, 'formform')
				if (!form.teamId) {
					uni.showToast({
						title: "暂无团队ID",
						icon: "none"
					})
					return
				}
				if (!form.picture) {
					uni.showToast({
						title: "请上传宠物头像",
						icon: "none"
					})
					return
				}
				if (!form.name) {
					uni.showToast({
						title: "请输入宠物名称",
						icon: "none"
					})
					return
				}
				if (!form.birthday) {
					uni.showToast({
						title: "请选择宠物生日",
						icon: "none"
					})
					return
				}
				form.birthday = `${form.birthday} 00:00:00`
				if (!this.typeList[this.typeIndex]?.code) {
					uni.showToast({
						title: "请选择宠物类型",
						icon: "none"
					})
					return
				}
				if (!this.kindList[this.kindIndex]?.code) {
					uni.showToast({
						title: "请选择宠物品种",
						icon: "none"
					})
					return
				}
				if (!this.genderList[this.genderIndex].key) {
					uni.showToast({
						title: "请选择宠物性别",
						icon: "none"
					})
					return
				}
				let param = {
					...form,
					sex: this.genderList[this.genderIndex].key,
					type1: this.typeList[this.typeIndex].code,
					type2: this.kindList[this.kindIndex].code
				}
				if (this.id) {
					editCargo({
						...param
					}).then(res => {
						uni.showToast({
							title: "修改成功"
						})
						setTimeout(() => {
							this.navigateBack()
						}, 500)

						console.log(res, 'editCargo')
					})
					return
				}
				addCargo({
					...param
				}).then(res => {
					uni.showToast({
						title: "添加成功"
					})
					setTimeout(() => {
						this.navigateBack()
					}, 500)
					console.log(res, 'addCargo')
				})

			},
			navigateBack() {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				if (prevPage?.$vm?.handlePathInit) {
					prevPage?.$vm?.handlePathInit('init', {})
				}
				uni.navigateBack()
			},
			async getEnumList() {
				let res = await getEnumList()
				let sexType = res.sexType || []
				this.genderList =  sexType.filter(item=>{
					return item.key != 'Unknown'
				})
			},
			async handlePicker(e, type) {
				if (type == 'kindIndex' && this.kindIndex == -1 && !this.kindList.length) {
					uni.showToast({
						title: "请先选择宠物类型",
						icon: "none"
					})
					return
				}
				if (type == 'typeIndex') {
					let res = await this.getTypeList(this.typeList[e.detail.value].code)
					this.kindList = []
					this.kindIndex = -1
					this.kindList = res
					console.log(res)
				}
				this[type] = e.detail.value
			},
			handleDate(e) {
				this.form.birthday = e.detail.value
			}
		}
	}
</script>
<style>
	.petInputStyle {
		color: #BBBBBB;
	}
</style>
<style scoped lang="scss">
	.head {
		width: 100%;
		padding: 48rpx 0 0;
		display: flex;
		justify-content: center;

		.head-img {
			width: 240rpx;
			height: 240rpx;
			position: relative;

			.head-picture {
				width: 100%;
				height: 100%;
			}

			.head-icon {
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

	.item {
		height: 152rpx;
		border-bottom: 1rpx solid #E5E5E5;
		display: flex;
		align-items: center;
		padding: 80rpx 0 24rpx;
		margin: 0 48rpx;
		box-sizing: border-box;

		.item-pick {
			width: 100%;
			flex: 1;
		}

		image {
			width: 24rpx;
			height: 24rpx;
		}

		view,
		input {
			width: 100%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			// color: #BBBBBB;
			line-height: 48rpx;
		}
	}

	.btn {
		margin: 160rpx auto 0;
		width: 314rpx;
		background: var(--primaryBg);
		border-radius: 53rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: var(--btnColor);
		line-height: 106rpx;
		text-align: center;
	}
</style>